import React, { useMemo, useState } from "react"; 

export const Father2=()=>{
    const [count,setCount]=useState(0)
    const [flag,setFlag]=useState(false)

    // 缓存数据，返回的是数据，依赖项变了才会重新计算执行
    const tips=useMemo(()=>{
        console.log('触发tips调用');
        
        return flag?<p>努力了吗</p>:<p>不许偷懒</p>
    },[flag])

    return<>
    <p>count值为:{count}</p>
    <p>flag为:{String(flag)}</p>
    {tips}
    <button onClick={()=>setCount(count+1)}>改变count</button>
    <button onClick={()=>setFlag(!flag)}>toggle</button>
    <hr></hr>
    <Sons count={count}/>
    </>
}

// React.memo对子组件包裹，父组件渲染子组件就不会跟着渲染，除非props有变化
const Sons=React.memo(({count})=>{
    console.log("子组件渲染了");
    
    return<>
    count为:{count}
    </>
})